<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="container"></div>
</body>
<script src="/xuni/bundle.js"></script>

<script>

  // let template = `<h1>我买了一台{{thing}}，好{{mood}}</h1>`;
  // let template = `<ul>{{#arr}}
  //       <li>
  //         <div>{{name}}的基本信息</div>
  //         <div>
  //           <p>姓名：{{name}}</p>
  //           <p>年龄：{{age}}</p>
  //           <p>性别：{{sex}}</p>
  //         </div>
  //       </li>
  //     {{/arr}}</ul>`;
  // <h1>我买了一台{{thing}}，好{{mood}}</h1>
  let template = `
 


  <ul>
  {{#students}}
    <li>
      <div class='name'>{{name}}的基本信息</div>

      <div>        

               <p>姓名：{{name}}</p>  
        <p>年龄：{{age}}</p>  
        <p>性别：{{sex}}</p>
        {{#interest}}
          <p>爱好：{{.}}</p>
        {{/interest}}
      </div>
    </li>
  {{/students}}
</ul>`;

  let data = {
    thing: '电脑',
    mood: '开心',
    students: [
      { 'name': 'wzg', 'age': 12, 'sex': '男', interest: ['打篮球1', '踢足球'] },
      { 'name': 'gg', 'age': 15, 'sex': '男', interest: ['打篮球2', '踢足球'] },
      { 'name': 'ee', 'age': 16, 'sex': '男', interest: ['打篮球3', '踢足球'] }
    ]
  };
  const domStr = templateEngine.render(template, data);
  console.log(domStr);
  /* 渲染上树 */
  container.innerHTML = domStr;
</script>

</html>